<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>首页</title>
	<meta name="decorator" content="default"/>
	<style type="text/css">
	.user-stats h3{
		padding:20px auto;
		line-height:60px;
	}
	</style>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content">
		<div class="ibox ibox-header">
			<div class="ibox-title">
				<h5>用户概况 </h5>
			</div>
		</div>
		
		<div class="row stats-row">
	          <div class="col-sm-4">
	              <div class="ibox float-e-margins">
	                   <div class="ibox-title no-borders user-stats">
	                     	<h3>用户总数：<strong>${userCount}</strong></h3>
	                     	<h3>昨日新增：<strong>${yesterdayStats.register}</strong></h3>
	                     	<h3>昨日活跃：<strong>${yesterdayStats.active}</strong></h3>
	                   </div>

	              </div>
	            
	          </div>
	          <div class="col-sm-8">
	              <div id="user-chart" style="width: 100%;height:250px;"></div>
	          </div>

	  </div>
	      
	
	    <div class="ibox ibox-header">
			<div class="ibox-title">
				<h5>用户增长趋势（近30天） </h5>
			</div>
		</div>
		
		<div class="row stats-row">
	          <div id="increase-chart" style="width: 100%;height:300px;"></div>
	    </div>
	      
		<div class="row stats-row">
	          <div id="call-chart" style="width: 100%;height:300px;"></div>
	    </div>
	    
		<div class="row stats-row">
	          <div id="finance-chart" style="width: 100%;height:300px;"></div>
	    </div>
		
	</div>
 </div>
<script type="text/javascript" src="${ctxStatic}/echarts/echarts.common.min.js"></script>
<script type="text/javascript">
	var weatherIcons = {
	    'Sunny': './data/asset/img/weather/sunny_128.png',
	    'Cloudy': './data/asset/img/weather/cloudy_128.png',
	    'Showers': './data/asset/img/weather/showers_128.png'
	};
	var lineColor = "#A52A2A";
	var userChart = echarts.init(document.getElementById('user-chart'));
	var vipStatsJson  = ${vipStatsJson};
	var vipLabels = ['普通用户', '包月会员','包季会员','包年会员'];
	var vipStatsData = [];
	for(var i=0; i<vipLabels.length; i++){
		var value = vipStatsJson[i+'']|| 0;
		vipStatsData.push( {value:value, name: vipLabels[i]});
	}
	userChart.setOption({
	    tooltip : {
	        trigger: 'item',
	        formatter: "{b} : {c} ({d}%)"
	    },
	    legend: {
	        orient: 'vertical',
	        left: 'right',
	        data: vipLabels
	    },
	    series : [
	        {
	            type: 'pie',
	            radius : '70%',
	            center: ['30%', '50%'],
	            data:vipStatsData
	        }
	    ]
	});
	 
	var dailyStatsList = ${dailyStats}
	var dateList = [];
	var registerStatsList = [];
	var callStatsList = [];
	var incomeStatsList = [];
	for(var i=0; i<dailyStatsList.length; i++){
		var item = dailyStatsList[i];
		dateList.push(item.ref_date);
		registerStatsList.push(item.register);
		callStatsList.push(item.call_minutes);
		incomeStatsList.push(item.income);
	}
	var increaseChart = echarts.init(document.getElementById('increase-chart'));
	increaseChart.setOption({
		    tooltip: {
		        trigger: 'none',
		        axisPointer: {
		            type: 'cross'
		        }
		    },
		    grid: {
		        top: 70,
		        bottom: 50
		    },
		    xAxis: [
		        {
		            type: 'category',
		            axisTick: {
		                alignWithLabel: true
		            },
		            axisLine: {
		                onZero: false
		            },
		            axisPointer: {
		                label: {
		                    formatter: function (params) {
		                        return '用户数  ' + params.value
		                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
		                    }
		                }
		            },
		            data: dateList
		        }
		    ],
		    yAxis: [
		        {
		            type: 'value'
		        }
		    ],
		    series: [
		        {
		            name:'增长量',
		            type:'line',
		            smooth: true,
		            itemStyle : {  
                        normal : {  
                            lineStyle:{  
                                color: lineColor  
                            }  
                        }  
                    },
		            data: registerStatsList
		        }
		    ]
		});
	
	var callChart = echarts.init(document.getElementById('call-chart'));
	callChart.setOption({
		    tooltip: {
		        trigger: 'none',
		        axisPointer: {
		            type: 'cross'
		        }
		    },
		    grid: {
		        top: 70,
		        bottom: 50
		    },
		    xAxis: [
		        {
		            type: 'category',
		            axisTick: {
		                alignWithLabel: true
		            },
		            axisLine: {
		                onZero: false
		            },
		            axisPointer: {
		                label: {
		                    formatter: function (params) {
		                        return '通话时长  ' + params.value
		                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
		                    }
		                }
		            },
		            data: dateList
		        }
		    ],
		    yAxis: [
		        {
		            type: 'value'
		        }
		    ],
		    series: [
		        {
		            name:'通话时长',
		            type:'line',
		            smooth: true,
		            itemStyle : {  
                        normal : {  
                            lineStyle:{  
                                color: lineColor  
                            }  
                        }  
                    },
		            data: callStatsList
		        }
		    ]
		});
	
	// 财务
	var financeChart = echarts.init(document.getElementById('finance-chart'));
	financeChart.setOption({
		    tooltip: {
		        trigger: 'none',
		        axisPointer: {
		            type: 'cross'
		        }
		    },
		    grid: {
		        top: 70,
		        bottom: 50
		    },
		    xAxis: [
		        {
		            type: 'category',
		            axisTick: {
		                alignWithLabel: true
		            },
		            axisLine: {
		                onZero: false
		            },
		            axisPointer: {
		                label: {
		                    formatter: function (params) {
		                        return '总收入  ' + params.value
		                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
		                    }
		                }
		            },
		            data: dateList
		        }
		    ],
		    yAxis: [
		        {
		            type: 'value'
		        }
		    ],
		    series: [
		        {
		            name:'收入情况',
		            type:'line',
		            smooth: true,
		            itemStyle : {  
                        normal : {  
                            lineStyle:{  
                                color: lineColor  
                            }  
                        }  
                    },  
		            data: incomeStatsList
		        }
		    ]
		});

</script>
</body>
</html>